@charset "utf-8";
@import "common/reset";
@function p($px){   
    @return $px/2+px
}
.mobile{
    //头部
    header{
        .head_left{
            float: left;
            width: p(123);
            height: p(52);
            border: p(2) solid #FF9344;
            border-radius: p(20);
            text-align: center;
            margin-left: p(23);
            margin-top: p(50);
            a{
                font-size: p(22);
                color: #000000;
            }
        }
        .head_right{
            float: right;
            width: p(184);
            select{
                -webkit-appearance: none;
                width: p(159);
                height: p(55);
                border: p(2) solid #FF9344;
                background: url(../img/xiala.png)no-repeat right p(12) top p(22);
                background-size: p(30) p(16);
                border-radius: p(3);
                text-indent:p(13);
                margin-right: p(22);
                margin-top: p(38);
                font-size: p(26);
            }
        }
        .head_center{
            .detail{
                width: p(120);
                margin: 0 auto;
                text-align: center;
                span{
                    display: inline-block;
                    font-size: p(26);
                    padding-top: p(53);
                }
            }
        }
    }
    //内容
    section{
        margin-bottom: p(180);
        .center{
            .search{
                margin: 0 auto;
                width: p(268);
                height: p(54);
                border: p(2) solid #FF9344;
                border-radius: p(25);
                margin-top: p(36);
                input{
                    height: p(50);
                    line-height: p(50);
                    margin-left: p(14);
                    padding: 0 p(12);
                    font-size: p(22);
                    border: none;
                    background: none;
                    width: p(215);
                    vertical-align: middle;
                }
                i{
                    color: #FF9344;
                    margin-left: p(-22);
                    vertical-align: middle;
                }
            }
        }
        .sousuo{
            p{
                text-align: center;
                font-size: p(26);
                padding-top: p(32);
            }
            .sousuo_mokuai{
                overflow: hidden;
                width: p(512);
                margin: 0 auto;
                margin-top: p(10);
                ul{
                    width: 100%;
                    height: p(64);
                    line-height: p(64);
                    li{
                        float: left;
                        width: p(124);
                        height: p(62);
                        background: #dcdcdc;
                        margin-right: p(4);
                        margin-bottom: p(4);
                        text-align: center;
                        vertical-align: middle;
                        a{
                            color: #898989;
                            font-size: p(20);
                        }
                    }
                }
            }
        }
        //热门搜索
        .souhot{
            margin-top: p(38);
            .souhot_top{
                padding-left: p(30);
                padding-right: p(20);
                .souhot_top_left{
                    float: left;
                    img{
                        width: p(34);
                        height: p(45);
                        color: #FF9344;
                        vertical-align: middle;
                    }
                    span{
                        padding-left: p(24);
                        font-size: p(30);
                        vertical-align: middle;
                    }
                }
                .souhot_top_right{
                    float: right;
                    vertical-align: middle;
                    a{
                        color: #000000;
                    }
                    i{
                        font-size: p(28);
                        color: #FF9344;
                        vertical-align: middle;
                    }
                    span{
                        font-size: p(24);
                        vertical-align: middle;
                    }
                }
            }
        .souhot_imge{
            overflow: hidden;
            width: 94%;
            margin:0 auto;
            padding-top: p(32);
            .souhot_imge1{
                width: 39%;
                float: left;
                img{width: 100%;}
            }
            .souhot_imge_right{
                float: right;
                width: 59%;
                .souhot_imge2{
                width: 100%;           
                img{width: 100%;padding-bottom: 1%;}
            }
                .souhot_imge3{
                    width: 45%;
                    float: left;
                    img{width: 100%;}
                }
                .souhot_imge4{
                    width: 49%;
                    float: right;
                    img{width: 100%;}
                    }   
                }
            } 
        }
        //推荐
        .tuijian{
            margin-top: p(48);
            ul{
                overflow: hidden;
                width: 100%;
                margin-top: p(48);
                li{
                    float: left;
                    width: 33%;
                    text-align: center;
                    img{
                       width: 85%;
                    }
                }
            }
            .tuijian_top{
                overflow: hidden;
                padding-left: p(30);
                padding-right: p(20);
                .tuijian_top_left{
                    float: left;
                    i{
                        font-size: p(40);
                        color: #ff9344;
                        vertical-align: middle;
                    }
                    span{
                        font-size: p(30);
                        vertical-align: middle;
                    }
                }
                .tuijian_top_right{
                    float: right;
                    vertical-align: middle;
                    a{
                        color: #000000;
                    }
                    i{
                        font-size: p(28);
                        color: #FF9344;
                        vertical-align: middle;
                    }
                    span{
                        font-size: p(24);
                        vertical-align: middle;
                    }
                }
            }
        }
    }
    
    //底部
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        ul{
            li{
                float: left;
                width: 25%;
            }
            a{
                display: block;
                text-align: center;
                color: #000000;
                img{
                   width: p(75);
                   height: p(75);
                }
                h2{
                    font-size: p(26);
                    margin-top: p(9);
                    margin-bottom: p(14);
                }
            }
        }
    }
}
